<template>
    <div>
        <div><h1>商品分类</h1></div>

        <div>
            <el-form
                :inline="true"
                :model="searchForm"
                class="demo-form-inline"
            >
                <el-form-item label="关键词">
                    <el-input
                        v-model="searchForm.keyWord"
                        placeholder="请输入关键字"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select
                        v-model="searchForm.typeStatus"
                        placeholder="请选择状态"
                        style="width: 160px;"
                        clearable
                    >
                        <el-option label="显示" :value="0" />
                        <el-option label="隐藏" :value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loadTypeTree"
                        >查询</el-button
                    >
                    <el-button type="primary" @click="onAddType"
                        >添加分类</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table
                :data="tableData"
                style="width: 100%; margin-bottom: 20px"
                row-key="id"
                border
                default-expand-all
            >
                <el-table-column prop="typeId" label="ID" width="100" />
                <el-table-column prop="typeName" label="名称" width="180" />
                <el-table-column prop="typeImage" label="图片" width="160">
                    <template #default="scope">
                        <img
                            :src="scope.row.typeImage"
                            style="width: 50px; height: 50px"
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="typeTop" label="排序" width="100" />
                <el-table-column prop="typeStatus" label="状态" width="120">
                    <template #default="scope">
                        <span v-if="scope.row.typeStatus == 0">显示</span>
                        <span v-if="scope.row.typeStatus == 1">隐藏</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button
                            type="primary"
                            size="small"
                            @click="onAddSubType(scope.row)"
                            >添加</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-dialog
                v-model="dialogFormVisible"
                title="添加商品分类"
                width="500"
            >
                <el-form :model="form">
                    <el-form-item
                        label="分类名称"
                        :label-width="formLabelWidth"
                    >
                        <el-input v-model="form.typeName" autocomplete="off" />
                    </el-form-item>
                    <el-form-item
                        label="分类图片"
                        :label-width="formLabelWidth"
                    >
                        <el-upload
                            class="avatar-uploader"
                            action="http://localhost:10010/prod/type/uploadFile"
                            :headers="headers"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                        >
                            <img
                                v-if="imageUrl"
                                :src="imageUrl"
                                class="avatar"
                            />
                            <el-icon v-else class="avatar-uploader-icon"
                                ><Plus
                            /></el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="排序" :label-width="formLabelWidth">
                        <el-input v-model="form.typeTop" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="状态" :label-width="formLabelWidth">
                        <el-radio-group v-model="form.typeStatus">
                            <el-radio :value="0">显示</el-radio>
                            <el-radio :value="1">隐藏</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogFormVisible = false"
                            >取消</el-button
                        >
                        <el-button type="primary" @click="onSubmitAddType">
                            确认
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getTypeList, addType } from "@/api/api";
import { onMounted, ref } from "vue";
import { Plus } from "@element-plus/icons-vue";

import { ElMessage, type UploadProps } from "element-plus";
import { he } from "element-plus/es/locales.mjs";

const tableData = ref([]);
const searchForm = ref({
    pageNum: 1,
    pageSize: 10,
    keyWord: null,
    typeStatus: null,
});

const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const form = ref({
    typeId: null,
    typeImage: "",
    typeName: "",
    typePid: 0,
    typeStatus: 0,
    typeTop: 0,
});
const imageUrl = ref("");
const headers = ref({
    token: sessionStorage.getItem("token"),
});

// 添加子类
const onAddSubType = (row: any) => {
    form.value = {
        typeId: null,
        typeImage: "",
        typeName: "",
        typePid: 0,
        typeStatus: 0,
        typeTop: 0,
    };
    imageUrl.value = "";
    form.value.typePid = row.typeId;
    dialogFormVisible.value = true;
};

// 添加商品分类
const onSubmitAddType = () => {
    form.value.typeImage = imageUrl.value;
    addType(form.value).then((res: any) => {
        if (res.data.code == 200) {
            ElMessage.success("添加成功");
            dialogFormVisible.value = false;

            // 刷新列表
            loadTypeTree();
        } else {
            ElMessage.error(res.data.msg);
        }
    });
};

const handleAvatarSuccess: UploadProps["onSuccess"] = (res, uploadFile) => {
    imageUrl.value = res.data;
};

//
const onAddType = () => {
    console.log("add type");
    form.value = {
        typeId: null,
        typeImage: "",
        typeName: "",
        typePid: 0,
        typeStatus: 0,
        typeTop: 0,
    };
    imageUrl.value = "";
    dialogFormVisible.value = true;
};

// 加载商品分类树
const loadTypeTree = () => {
    getTypeList(searchForm.value).then((res: any) => {
        tableData.value = res.data.data;
    });
};

//
onMounted(() => {
    loadTypeTree();
});
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
